{% extends 'nav.html' %}
{% block title %}酒店住户信息管理系统{% endblock title %}
{% block style %}
    <style>
        #nav ul .managedata {
            background: linear-gradient(90deg, rgba(71, 137, 255, 1) 0%, rgba(71, 137, 255, 1) 2%, rgba(71, 137, 255, 0.47) 3%, rgba(71, 137, 255, 0.1) 56%, rgba(36, 69, 128, 0) 100%);
            border-radius: 3px;
        }

        #user {
            float: right;
            margin-top: 35px;
            /*margin-left: 893px;*/
            margin-right: 58px;

        }


        #totle {
            margin-top: 35px;
            float: left;
            width: 1527px;
        }

        .blue {
            width: 354px;
            height: 143px;
            background: linear-gradient(134deg, rgba(115, 165, 255, 1) 0%, rgba(64, 132, 254, 1) 100%);
            box-shadow: 0px 0px 6px rgba(15, 62, 188, 0.03);
            opacity: 1;
            border-radius: 7px;
            float: left;
            /*margin-left: 57px;*/
        }

        .blue .name {
            /* width: 56px; */
            height: 19px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 19px;
            color: rgba(201, 222, 255, 1);
            opacity: 1;
            margin-top: 32px;
            text-align: center;
        }

        .blue .digit {
            /* width: 108px; */
            height: 35px;
            font-size: 40px;
            font-family: San Francisco Display;
            font-weight: bold;
            line-height: 35px;
            color: rgba(255, 255, 255, 1);
            opacity: 1;
            text-align: center;
            margin-top: 12px;
        }

        .white {
            width: 354px;
            height: 143px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 6px rgba(15, 62, 188, 0.03);
            opacity: 1;
            border-radius: 7px;
            float: left;
            margin-left: 37px;
        }

        .white .name {
            /* width:56px; */
            height: 19px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 19px;
            color: rgba(158, 173, 197, 1);
            opacity: 1;
            margin-top: 32px;
            text-align: center;
        }

        .white .digit {
            /* width:93px; */
            height: 35px;
            font-size: 40px;
            font-family: San Francisco Display;
            font-weight: bold;
            line-height: 35px;
            color: rgba(71, 137, 255, 1);
            opacity: 1;
            text-align: center;
            margin-top: 12px;
        }

        #room {
            width: 484px;
            height: 454px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
            opacity: 1;
            border-radius: 7px;
            float: left;
            margin-top: 24px;
            /*margin-left: 57px;*/
        }

        #live {
            width: 1005px;
            height: 454px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
            opacity: 1;
            border-radius: 7px;
            float: left;
            margin-top: 24px;
            margin-left: 37px;
            /* padding-left: 37px; */
        }

        #live #pretotle {
            width: 248px;
            height: 113px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(71, 137, 255, 1);
            box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
            opacity: 0.8;
            border-radius: 7px;
            float: left;
        }

        #pretotle .number {
            width: 59px;
            height: 21px;
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 21px;
            color: rgba(71, 137, 255, 1);
            opacity: 1;
            margin-left: 30px;
            margin-top: 31px;
            float: left;
        }

        #pretotle .name {
            height: 14px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: rgba(189, 189, 189, 1);
            opacity: 1;
            margin-top: 11px;
            margin-left: 30px;
            float: left;
        }

        #pretotle .pretotledigit {
            width: 23px;
            height: 14px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: rgba(123, 206, 158, 1);
            opacity: 1;
            float: left;
            margin-top: 12px;
            margin-left: 2px;
        }

        #money {
            width: 1526px;
            height: 403px;
            background: rgba(255, 255, 255, 1);
            opacity: 1;
            border-radius: 7px;
            float: left;
            margin-top: 24px;
            /*margin-left: 57px;*/
        }

        #live #real {
            width: 248px;
            height: 113px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(71, 137, 255, 1);
            box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
            opacity: 0.8;
            border-radius: 7px;
            float: left;
            margin-top: 17px;
        }

        #real .number {
            width: 59px;
            height: 21px;
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 21px;
            color: rgba(30, 203, 193, 1);
            opacity: 1;
            margin-left: 30px;
            margin-top: 31px;
            float: left;
        }

        #real .name {
            height: 14px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: rgba(189, 189, 189, 1);
            opacity: 1;
            margin-top: 11px;
            margin-left: 30px;
            float: left;
        }

        #real .realtotledigit {
            width: 23px;
            height: 14px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color:  rgba(123, 206, 158, 1);
            opacity: 1;
            float: left;
            margin-top: 12px;
            margin-left: 2px;
        }

        .right {
            position: absolute;
            left: 307px;
        }
    </style>
{% endblock style %}

{% block body %}
    {% block managedata %}{% endblock %}
    <div class="right">
        <!-- 用户 -->
        <div id="user">
            <img src="../../static/image/index/帮助.png" style="margin-bottom: 9px"/>
            <img src="../../static/image/index/通知.png" style="margin-left:36px;margin-bottom: 9px"/>
            <img src="../../static/image/index/图像 2.png"
                 style="width:40px;height:40px;background:rgba(255,255,255,1);border-radius:50%;opacity:1;margin-left:28px;justify-content:center;overflow:hidden;align-items: center;"/>
            <img src="../../static/image/index/路径 1146@2x.png" style="width:7px;margin-left:12px;margin-bottom: 15px "/>
        </div>

        <!-- 数据概要 -->
        <div id="totle">
            <!-- 今日收益 -->
            <div class="blue">
                <div class="name">今日收益</div>
                <div class="digit">51860</div>
            </div>
            <!-- 今日收益 -->
            <div class="white">
                <div class="name">今日支出</div>
                <div class="digit">25673</div>
            </div>
            <!-- 今日收益 -->
            <div class="white">
                <div class="name">今日客流量</div>
                <div class="digit">374</div>
            </div>
            <!-- 今日收益 -->
            <div class="white">
                <div class="name">今日订单</div>
                <div class="digit">267</div>
            </div>
        </div>


        <!-- 客房情况 -->
        <div id="room">
            <script>
                var myChart = echarts.init(document.getElementById('room'));

                let kv = {{ rooms_number | safe }};//取出后台传递的数据，此处添加safe过滤避免警告
                let test = [];//声明一个新的字典用于存放数据
                for (let logKey in kv) {//将对应键值对取出存入test，logKey 为该字典的键
                    if (!kv.hasOwnProperty(logKey)) continue;
                    test.push({value: kv[logKey], name: logKey});
                }

                var option = {
                        dataset: {
                            source: test,
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                return params.name + ": " + params.value.value + "间 " + "(" + params.percent + "%)"
                            }
                        },
                        title: {
                            text: '住房情况',
                            left: 47,
                            top: 49,
                            textStyle: {
                                fontSize: 24,
                                fontWeight:
                                    'bold',
                                color: '#4F4F4F',
                            }
                        }
                        ,
                        legend: {
                            orient: 'horizontal',
                            x: 'center',
                            bottom: 15,
                            data: ['已入住', '预定', '空闲', '维修'],
                            icon: "circle",
                            textStyle: {
                                rich: {
                                    a: {
                                        fontSize: 16,
                                        color: "#EA5504",
                                        padding: 10
                                    },
                                    b: {
                                        fontSize: 16,
                                        color: "#333"
                                    }
                                }
                            }
                        }
                        ,
                        series: [{
                            type: 'pie',
                            radius: ['38%', '50%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            color: ['#D4EAFF', '#A2D0FC', '#78B5FF', '#5A9DFF']
                        }]
                    }
                ;
                myChart.setOption(option);
            </script>
        </div>


        <!-- 入住情况 -->
        <div id="live">
            <img src="../../static/image/index/路径 1146@2x.png"
                 style="width:7px;float:right;margin-right:38px;margin-top:32px;"/>
            <div id="chart" style="width:658px;height:337px;float:left;margin-left:55px;margin-top:42px">
                <script>
                    var myChart = echarts.init(document.getElementById('chart'));
                    var option = {
                        title: {
                            text: '入住情况',
                            textStyle: {
                                fontSize: 24,
                                fontWeight: 'bold',
                                color: '#000000',
                                fontFamily: 'Microsoft YaHei',
                            },
                        },
                        legend: {
                            data: ['预订数量', '实际入住'],
                            icon: "circle",
                            textStyle: {
                                color: '#4D6282',
                                fontSize: 16,

                            }
                        },
                        grid: {
                            left: 51,
                            top: 90,
                            bottom: 30,
                        },
                        tooltip: {},
                        xAxis: {
                            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                            axisLine: {
                                lineStyle: {
                                    color: '#EFF0F5',
                                },
                            },
                            axisLabel: {
                                color: '#9EADC5',
                            },
                        },
                        yAxis: {
                            name: '(间) ',
                            nameTextStyle: {
                                color: '#9EADC5',
                                fontSize: 14,
                                fontFamily: 'Microsoft YaHei',
                                align: 'right',
                            },
                            nameGap: 22,
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                color: '#9EADC5',
                            },
                            axisTick: {
                                show: false,
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#EFF0F5',
                                },
                            },
                        },
                        series: [{
                            name: '预订数量',
                            type: 'bar',
                            data: [600, 550, 390, 650, 410, 390, 400],
                            color: '#4789FF',
                            barWidth: 10,
                        },
                            {
                                name: '实际入住',
                                type: 'bar',
                                data: [450, 410, 580, 380, 390, 570, 450],
                                color: '#1ECBC1',
                                barWidth: 10,
                            }
                        ]
                    }
                    myChart.setOption(option)
                </script>
            </div>

            <div id="pretotle" style="margin-top:53px">
                <div class="number">¥46734</div>
                <img src="../../static/image/index/路径 1144@2x.png"
                     style="width:7px;float:left;margin-left:108px;margin-top:36px;margin-right:5px;margin-bottom:5px"/>
                <div class="name">预订数量</div>
                <img src="../../static/image/index/增长箭头.png"
                     style="width:13px;margin-left:9px;margin-top:12px;float:left"/>
                <div class="pretotledigit">6.3%</div>


            </div>
            <div id="real">
                <div class="number">¥34731</div>
                <img src="../../static/image/index/路径 1145@2x.png"
                     style="width:7px;float:left;margin-left:108px;margin-top:36px;margin-right:5px;margin-bottom:5px"/>
                <div class="name">实际入住</div>
                <img src="../../static/image/index/增长箭头.png"
                     style="width:13px;margin-left:9px;margin-top:12px;float:left"/>
                <div class="realtotledigit">1.7%</div>


            </div>
        </div>


        <!-- money -->
        <div id="money">
            <script type="text/javascript">
                var myChart = echarts.init(document.getElementById('money'));
                var option = {
                    title: {
                        text: '月收益情况',
                        left: 45,
                        top: 31,
                        textStyle: {
                            fontSize: 24,
                            fontWeight: 'bold',
                            color: '#2D3444',
                            fontFamily: 'Microsoft YaHei',
                        }
                    },
                    legend: {
                        data: ['净收入', '营业额'],
                        icon: "circle",
                        top: 47,
                        textStyle: {
                            color: '#4D6282',
                            fontSize: 17,
                        }
                    },
                    grid: {
                        left: 137,
                        top: 106,
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
                        axisLine: {
                            lineStyle: {
                                color: '#EFF0F5',
                            },
                        },
                        axisLabel: {
                            color: '#9EADC5',
                        },
                    },
                    yAxis: {
                        name: '(元)',
                        nameTextStyle: {
                            color: '#4D6282',
                            fontSize: 14,
                            fontFamily: 'Microsoft YaHei',
                            align: 'right',
                        },
                        type: 'value',
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            color: '#9EADC5',
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#EFF0F5',
                            },
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            lineStyle: {
                                color: '#DAE3E6',
                            }
                        }
                    },
                    series: [{
                        name: '净收入',
                        data: [820, 932, 901, 934, 990, 1030, 1020, 1045, 1031, 1002, 942, 934, 934, 931, 1012, 1051, 1042, 1034, 1041, 1031, 1043, 1010, 960, 940, 912, 930, 990, 1009, 1009, 1090, 1150],
                        type: 'line',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(71,137,255,0.6)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(71,137,255,0)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        lineStyle: {
                            color: '#4789FF',
                        },
                        itemStyle: {
                            color: '#4789FF',
                        },
                        showSymbol: false,
                        smooth: true,
                    },
                        {
                            name: '营业额',
                            data: [1414, 1522, 1601, 1734, 1601, 1630, 1720, 1745, 1631, 1712, 1642, 1634, 1734, 1731, 1812, 1751, 1642, 1534, 1541, 1531, 1443, 1451, 1542, 1434, 1341, 1331, 1343, 1390, 1450, 1440],
                            type: 'line',
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(67,179,180,0.6)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(67,179,180,0)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            },
                            lineStyle: {
                                color: '#43B3B4',
                            },
                            itemStyle: {
                                color: '#43B3B4',
                            },
                            showSymbol: false,
                            smooth: true,
                        },
                    ]
                };
                myChart.setOption(option);
            </script>
        </div>
        <footer style="margin-left:450px;margin-top:30px;float:left;width:600px;text-align: center">
            <a href="http://www.beian.miit.gov.cn/" style="text-decoration:none;color:#939393;float:left">浙ICP备20006523号
                | </a>

            <div style="width:250px;margin:0;float:left">

                <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011802001941"
                   style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                    <img src="../../static/image/备案图标.png" style="float:left;"/>
                    <div style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">浙公网安备
                        33011802001941号
                    </div>
                </a>
            </div>

        </footer>
    </div>
{% endblock body %}
